<template>
    <div id="app">
        <div class="page-bar">
            <h3 class="page-breadcrumb page-title" style="font-family:微软雅黑; font-weight:50%;">
                <span>患者列表</span>
                <small>Patients</small>
            </h3>
            <div class="page-toolbar" style="padding-top:9px;">
                <div style="float:right; padding-left:10px;">
                    <a href="javascript:;" class="tooltips btn btn-circle btn-icon-only green" data-placement="bottom" data-original-title="新增 [ ADD ]" v-on:click="layeropen('','新增患者')" v-show="UserType == '3'">
                        <i class="fa fa-plus"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="portlet-body" style="padding-top: 20px; padding-bottom: 10px;">
            <div class="col-lg-4 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                <div class="col-lg-4  col-md-4 col-sm-4">
                    <div class="bold" style="line-height: 34px;">状态：</div>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-8">
                    <select class="form-control" v-model="Starts">
                        <option value="5">在透</option>
                        <option value="0">退出</option>
                        <option value="1">肾移植</option>
                        <option value="2">转出</option>
                        <option value="3">死亡</option>
                        <option value="4">转入</option>
                    </select>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                <div class="col-lg-4  col-md-4 col-sm-4">
                    <div class="bold" style="line-height: 34px;">姓名：</div>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-8">
                    <div class="input-icon right">
                        <i class="glyphicon glyphicon-edit tooltips" v-on:click="addPoint" style="cursor: pointer;" data-original-title="点击此处为名字添加点（·）" data-container="body"></i>
                        <input type="text" id="txtXM" class="form-control hText1" placeholder="填写姓名" v-model="PatientName">
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                <div class="col-lg-4  col-md-4 col-sm-4">
                    <div class="bold" style="line-height: 34px;">姓名简拼：</div>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-8">
                    <div class="input-icon  right">
                        <i class="glyphicon glyphicon-edit tooltips" v-on:click="addPointJP" style="cursor: pointer;" data-original-title="点击此处为名字添加点（·）" data-container="body"></i>
                        <input type="text" id="txtXMJP" class="form-control" placeholder="姓名简拼" v-model="Logogram">
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                <div class="col-lg-4  col-md-4 col-sm-4">
                    <div class="bold" style="line-height: 34px;">民族：</div>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-8">
                    <select class="form-control" v-model="Nation">
                        <option value="">请选择</option>
                        <option v-for="a in Nations" v-bind:value="a.Id">{{a.Name}}</option>
                    </select>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                <div class="col-lg-4  col-md-4 col-sm-4">
                    <div class="bold" style="line-height: 34px;">证件号：</div>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-8">
                    <input type="text" maxlength="30" class="form-control hText1" placeholder="证件号" v-model="IDNumber">
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6" style="padding-bottom: 10px;" v-show="UserType == 0 || UserType == 1">
                <div class="col-lg-4  col-md-4 col-sm-4">
                    <div class="bold" style="line-height: 34px;">所属医院：</div>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-8">
                    <select id="single" class="form-control select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true" v-model="Hid">
                        <option value="-1">请选择</option>
                        <option v-for="a in hospitalinfos" v-bind:value="a.Id">{{a.Name}}</option>
                    </select>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                <button type="button" class="btn btn-default" v-on:click="get(1)">查询</button>
            </div>
        </div>
        <div class="portlet-body table-scrollable">
            <table class="table table-bordered table-striped table-condensed flip-content" style="width:1500px;" id="myTable">
                <thead class="flip-content">
                    <tr>
                        <th> 姓名 </th>
                        <th> 性别 </th>
                        <th> 出生日期 </th>
                        <th> 年龄 </th>
                        <th> 民族 </th>
                        <th> 住院号 </th>
                        <th> 所属单位 </th>
                        <th> 证件类型 </th>
                        <th> 证件号码 </th>
                        <th style="width:50px;"> 操作 </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="PatientInfo in PatientInfos">
                        <td> {{PatientInfo.Name}} </td>
                        <td v-if="PatientInfo.Gender == '1' "> 男</td>
                        <td v-if="PatientInfo.Gender == '2' "> 女</td>
                        <td class="textright"> {{PatientInfo.Birthdate}} </td>
                        <td class="textright"> {{PatientInfo.Age}} </td>
                        <td> {{PatientInfo.Nation}} </td>
                        <td> {{PatientInfo.AD}} </td>
                        <td> {{PatientInfo.HosipitalName}} </td>
                        <td v-if="PatientInfo.IDType == '0'"> 居民身份证 </td>
                        <td v-if="PatientInfo.IDType == '1'"> 护照 </td>
                        <td v-if="PatientInfo.IDType == '2'"> 港澳台居民身份证 </td>
                        <td v-if="PatientInfo.IDType == '3'"> 旅行证据 </td>
                        <td v-if="PatientInfo.IDType == '4'"> 其他 </td>
                        <td v-if="PatientInfo.IDType == null"></td>
                        <td> {{PatientInfo.IDNumber}} </td>
                        <td style="width:50px;">
                            <a onclick="" target="_blank">
                                <div style=" width:100%; text-align:center;  cursor: pointer;" class="font-green-sharp basicon" title="血液透析单 [ VIEW ] " v-on:click="layeropeninfo(PatientInfo.Id,PatientInfo.DeathDate)"><i class="fa fa-hospital-o"></i></div>
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="page-bar-x" style="float: right;">
            <ul>
                <li v-if="showFirst">
                    <a v-on:click="get(--cur)">上一页</a>
                </li>
                <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}">
                    <a v-on:click="btnClick(index)">{{ index }}</a>
                </li>
                <li v-if="showLast">
                    <a v-on:click="get(++cur)">下一页</a>
                </li>
                <li>
                    <a>共<i>{{all}}</i>页</a>
                </li>
            </ul>
            <div style="clear:both;"></div>
        </div>
        <div class="clearfix"></div>
    </div>
</template>
<script>
  var baseUrl = 'http://localhost:5080/api/';
  export default {
		data:function() {
			return{
				user: JSON.parse(sessionStorage.getItem('user')),
				Hid: '',
				UserType: '',
				PatientName: "",//搜索条件
				Starts: "5",//状态
				Logogram: "",
				Nations: "",//民族下拉列表
				Nation: "",
				IDNumber: "",
				PatientInfos: "",//列表list
				geturl: baseUrl + "PatientInfo/GetPatients",
				getnationurl: baseUrl + "BasicDictionaryItem/GetNation",
				gethospitalurl: baseUrl + "BasicHosipitalInfo/GetBasicHosipitalInfosUseing",
				all: "", //总页数
				cur: "", //当前页码
				hospitalinfos: "",//医院下拉列表
			}
		},
		mounted: function() {
			this.$nextTick(function() {
				this.Hid = this.user["HosipitalId"];
				this.UserType = this.user["UserType"];
				//初始化数据
				this.gethospital();
				//获取民族
				this.$http.get(this.getnationurl, {
					emulateJSON: true
				}).then((res) => {
					if(res.body.Code == "HM200") {
						this.Nations = JSON.parse(res.body.Data);
					}
				});
				this.$http.get(this.geturl + "?PatientName=" + this.PatientName + "&Starts=" + this.Starts + "&Logogram=" + this.Logogram + "&Hid=" + this.Hid + "&Nation=" + this.Nation + "&IDNumber=" + this.IDNumber + "&pageSize=10&pageIndex=1", {
					emulateJSON: true
				}).then((res) => {
					this.cur = 1;
					if(res.body.Code == "HM200") {
						this.PatientInfos = JSON.parse(res.body.Data);
						for(var i = 0; i < this.PatientInfos.length; i++) {
							if(this.PatientInfos[i].Birthdate != "" && this.PatientInfos[i].Birthdate != null) {
								this.PatientInfos[i].Birthdate = this.PatientInfos[i].Birthdate.substring(0, 10);
							}
						};
						this.all = Math.ceil(res.body.Count / 10);
						this.cur = 1;
					} else {
						this.PatientInfos = [];
						this.all = 0;
					}
				});
			});
		},
		methods: {
			//获取医院信息
			gethospital: function() {
				this.$http.get(this.gethospitalurl, {
					emulateJSON: true
				}).then((res) => {
					if(res.body.Code == "HM200") {
						this.hospitalinfos = JSON.parse(res.body.Data);
						$(".select2, .select2-multiple").select2({
							placeholder: "请选择医院",
							width: null,
							language: 'zh-CN'
						});
						if(this.UserType == "0" || this.UserType == "1") {
							this.Hid = "-1";
						}
					}
				});

			},
			get: function(pageIndex) {
				this.Hid = $("#single").select2("data")[0].id;
				this.$http.get(this.geturl + "?PatientName=" + this.PatientName + "&Starts=" + this.Starts + "&Logogram=" + this.Logogram + "&Hid=" + this.Hid + "&Nation=" + this.Nation + "&IDNumber=" + this.IDNumber + "&pageSize=10&pageIndex=" + pageIndex, {
					emulateJSON: true
				}).then((res) => {
					if(res.body.Code == "HM200") {
						this.PatientInfos = JSON.parse(res.body.Data);
						for(var i = 0; i < this.PatientInfos.length; i++) {
							if(this.PatientInfos[i].Birthdate != "" && this.PatientInfos[i].Birthdate != null) {
								this.PatientInfos[i].Birthdate = this.PatientInfos[i].Birthdate.substring(0, 10);
							}
						};
						this.all = Math.ceil(res.body.Count / 10);
						this.cur = pageIndex;
					} else {
						this.PatientInfos = [];
						this.all = 0;
					}
				});
			},
			layeropen: function(id, title) {
				sessionStorage.setItem("pid", id);
				layer.open({
					skin: 'layui-layer-molv',
					title: title,
					type: 2,
					area: ['900px', '580px'],
					fix: false, //不固定
					maxmin: false,
					content: '../patient/PatientsForm.html',
					end: () => {
						this.get(this.cur);
					}
				});
			},
			layeropeninfo: function(id, status) {
				sessionStorage.setItem("pid", id);
				if(status == null || status == "null") {
					status = "";
				}
				sessionStorage.setItem("Status", status);
				window.location = "../hdis/shared/shared.html";
			},
			btnClick: function(data) { //页码点击事件
				if(data != this.cur) {
					this.cur = data
					this.get(data);
				}
			},
			//加点
			addPoint: function() {
				$("#txtXM").val($("#txtXM").val() + '·');
				$("#txtXM").focus();
			},
			addPointJP: function() {
				$("#txtXMJP").val($("#txtXMJP").val() + '·');
				$("#txtXMJP").focus();
			}
		},
		computed: {
			indexs: function() {
				var left = 1
				var right = this.all
				var ar = []
				if(this.all >= 9) {
					if(this.cur > 5 && this.cur < this.all - 4) {
						left = this.cur - 5
						right = this.cur + 4
					} else {
						if(this.cur <= 5) {
							left = 1
							right = 8
						} else {
							right = this.all
							left = this.all - 7
						}
					}
				}
				while(left <= right) {
					ar.push(left)
					left++
				}
				return ar
			},
			showLast: function() {
				if(this.cur == this.all || this.all == 0) {
					return false
				}
				return true
			},
			showFirst: function() {
				if(this.cur == 1 || this.all == 0) {
					return false
				}
				return true
			}
		}
  }
</script>